<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="headcss :: commonHeadCSS"></head>
<style type="text/css">
    * {
        font-family: Tahoma, Arial, Helvetica, Sans-serif;
    }

    table {
        width: 1280px;
        margin: 0px auto;
        font-size: 16px;
        color: #333333;
        text-align: center;
        border-collapse: collapse; /*细线表格*/
    }

    table td {
        border: 1px solid #999; /*细线条颜色*/
        height: 28px;
    }

    caption {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin: 0 auto;
    }

    tr.t1 td {
        background-color: #fff;
    }

    /* 交替行第一行的背景色 */
    tr.t2 td {
        background-color: #eee;
    }

    /* 交替行第二行的背景色 */
    tr.t3 td {
        background-color: #ccc;
    }

    /* 鼠标经过时的背景色 */
    th, tfoot tr td {
        font-weight: bold;
        text-align: center;
        background: #E0E3EA;
    }

    th {
        line-height: 30px;
        height: 30px;
    }

    tfoot tr td {
        background: #fff;
        line-height: 26px;
        height: 26px;
    }

    thead {
        border: 1px solid #999;
    }

    thead tr td {
        text-align: center;
    }

    #page {
        text-align: center;
        float: right;
    }

    #page a, #page a:visited {
        width: 60px;
        height: 22px;
        line-height: 22px;
        border: 1px black solid;
        display: block;
        float: left;
        margin: 0 3px;
        background: #c9c9c9;
        text-decoration: none;
    }

    #page a:hover {
        background: #c1c1c1;
        text-decoration: none;
    }

    .grayr {
        padding: 2px;
        font-size: 14px;
        background: #fff;
        float: right;
    }

    .grayr a {
        padding: 2px 5px;
        margin: 2px;
        color: #000;
        text-decoration: none;;
        border: 1px #c0c0c0 solid;
    }

    .grayr a:hover {
        color: #E5EAF0;
        border: 1px orange solid;
    }

    .grayr a:active {
        color: #000;
        background: #99ffff
    }

    .grayr span.current {
        padding: 2px 5px;
        font-weight: bold;
        margin: 2px;
        color: #303030;
        background: #fff;
        border: 1px orange solid;
    }

    .grayr span.disabled {
        padding: 2px 5px;
        margin: 2px;
        color: #797979;
        background: #c1c1c1;
        border: 1px #c1c1c1 solid;
    }
</style>
<script type="text/javascript">
    <!--
    function selectAll() {
        if (this.checked == true) {
            checkAll('test');
        }
        else {
            clearAll('test');
        }
    }

    function checkAll(name) {
        var el = document.getElementsByTagName('input');
        var len = el.length;
        for (var i = 0; i < len; i++) {
            if ((el[i].type == "checkbox") && (el[i].name == name)) {
                el[i].checked = true;
            }
        }
    }

    function clearAll(name) {
        var el = document.getElementsByTagName('input');
        var len = el.length;
        for (var i = 0; i < len; i++) {
            if ((el[i].type == "checkbox") && (el[i].name == name)) {
                el[i].checked = false;
            }
        }
    }

    -->
</script>
<body>
<div class="row-fluid">
    <div class="span12">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Basic Form Elements
                    </div>
                    <div class="panel-body">
                        <table>
                            <caption>查询</caption>
                            <thead>
                            <tr>
                                <th><input
                                        onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }"
                                        type="checkbox"
                                        value="" name="test" title="全选/取消"/></th>
                                <th>
                                    用户名
                                </th>
                                <th>
                                    用户类型
                                </th>
                                <th>
                                    所属地域
                                </th>
                                <th>
                                    管理人姓名
                                </th>
                                <th>
                                    管理人手机号
                                </th>
                                <th>
                                    上级管理信息
                                </th>
                                <th>
                                    日志
                                </th>
                                <th>
                                    操作类型
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tab">
                            <tr th:each="collect,iterStat : ${userinfo.list}">
                                <td><input type="checkbox" value="a" name="test"/></td>
                                <td th:text="${collect.userName}">用户名</td>
                                <td th:text="${collect.yhlx}">用户类型</td>
                                <td th:text="${collect.ssdy}">所属地域</td>
                                <td th:text="${collect.tjglbmglryxm}">管理人员姓名</td>
                                <td th:text="${collect.tjglbmglrysj}">管理人员手机</td>
                                <td><a href="#" th:href="@{/user/toUserView{guid}(guid=${collect.guid})}"
                                       th:target="iframe1">查看</a></td>
                                <td th:text="${collect.tjglbmglrysj}">日志</td>
                                <td><a href="#" th:href="@{/user/toUserUpdate{guid}(guid=${collect.guid})}"
                                       th:target="iframe1">修改信息</a>
                                    <a href="#" th:href="@{/user/toUserPW{guid}(guid=${collect.guid})}"
                                       onclick="if(confirm( '是否重置该用户的密码？ ')==false)return   false;"
                                       th:target="iframe1">重置密码</a>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="9">
                                    <div class="grayr">
                                        <span class="disabled">  &lt;  </span>
                                        <span class="current">1</span>
                                        <a href="#?page=2" _fcksavedurl="#?page=2">2</a>
                                        <a href="#?page=3" _fcksavedurl="#?page=3">3</a>
                                        <a href="#?page=4" _fcksavedurl="#?page=4">4</a>
                                        <a href="#?page=5" _fcksavedurl="#?page=5">5</a>
                                        <a href="#?page=6" _fcksavedurl="#?page=6">6</a>
                                        <a href="#?page=7" _fcksavedurl="#?page=7">7</a>...
                                        <a href="#?page=199" _fcksavedurl="#?page=199">199</a>
                                        <a href="#?page=200" _fcksavedurl="#?page=200">200</a>
                                        <a href="#?page=2" _fcksavedurl="#?page=2"> &gt; </a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="headJS :: commonJS"></div>
<script type="text/javascript" th:inline="javascript">
    //<![CDATA[
    var Ptr = document.getElementById("tab").getElementsByTagName("tr");
    var optype = /*[[${optype}]]*/;
    var M = {};
    $(function () {
        if (typeof(optype) !== "undefined" && optype !== '') {
            if (M.dialog1) {
                return M.dialog1.show();
            }
            M.dialog1 = jqueryAlert({
                'content': optype
            })
        }


        function $() {
            for (i = 1; i < Ptr.length + 1; i++) {
                Ptr[i - 1].className = (i % 2 > 0) ? "t1" : "t2";
            }
        }

        window.onload = $;
        for (var i = 0; i < Ptr.length; i++) {
            Ptr[i].onmouseover = function () {
                this.tmpClass = this.className;
                this.className = "t3";

            };
            Ptr[i].onmouseout = function () {
                this.className = this.tmpClass;
            };
        }
    })

    //]]>
</script>
</body>
</html>